<template>
  <div>
    <van-nav-bar
      title="支付订单"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-contact-card
      :type="type"
      :name="currentContact.name"
      :tel="currentContact.tel"
      @click="onEdit"
    />
    <div class="content">
      <van-card
        v-for="item in items.items"
        :key="item.id"
        :num="item.num"
        :price="item.price"
        :title="item.name"
        :thumb="item.imgs.split('||')[0]"
      />
      <van-submit-bar :price="total" button-text="支付"  @submit="onSubmit"> </van-submit-bar>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getAddress, updateOrder } from '@api/home'
import { Dialog, Toast } from 'vant'
export default {
  name: 'order',
  data () {
    return {
      currentContact: {
        name: '',
        tel: ''
      },
      type: ''
    }
  },
  created () {
    this.address()
  },
  methods: {
    onSubmit () {
      this.$dialog.confirm({
        title: '支付',
        message: '确认支付?'
      })
        .then(() => {
          var items = this.$store.state.Order.data.items
          // 删除下面的detailinfo
          items.forEach(el => {
            delete el.detailinfo
          })
          this.$store.state.Order.data.items = items
          updateOrder(this.$store.state.Order).then(res => {
            if (res.data.code === 200) {
              var items = this.$store.state.CartData.data
              var arr = []
              this.$store.state.Order.data.items.forEach(element => {
                arr.push(element.id)
              })
              arr.forEach(el => {
                items.forEach((element, i) => {
                  if (el === element.id) {
                    items.splice(i, 1)
                  }
                })
              })
              this.$store.commit('CartData/init_data', items)
              this.$store.commit('Order/produce_order', {})
              this.$router.replace('/cart')
              this.$toast('生成订单成功')
            } else {
              this.$toast('提交订单失败')
            }
          })
        })
        .catch(() => {
          this.$toast('暂未支付')
        })
    },
    onClickLeft () {
      this.$router.go(-1)
    },
    onEdit () {
      this.$router.push('/contactlist')
    },
    address () {
      getAddress().then((res) => {
        // 有地址
        if (this.$store.state.Order.data.contact && this.$store.state.Order.data.contact.hasOwnProperty('name') && this.$store.state.Order.data.contact.name !== '') {
          this.currentContact = this.$store.state.Order.data.contact
        } else {
          if (res.data.data.length) {
            var base = res.data.data
            var index = base.filter((element) => {
              return JSON.parse(element.content).isDefault
            })
            if (index.length) { // 走默认
              this.currentContact = JSON.parse(index[0].content)
            } else { // 无默认
              this.currentContact = JSON.parse(base[0].content)
            }
            this.type = 'edit'
          } else {
            this.type = 'add'
          }
        }
        this.$store.commit('Order/change_contact', this.currentContact)
      })
    }
  },
  computed: {
    ...mapState({
      items: (state) => JSON.parse(JSON.stringify(state.Order.data))
    }),
    total () {
      return this.items.items.reduce((p, v) => {
        return (p += v.price * v.num * 100)
      }, 0)
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  margin-bottom: 50px;
}
</style>
